// 评论管理
<template>
  <div class="role">
     <div class="role-content">
        <div class="role-top">
            <el-input placeholder="请输入订单编号" v-model="paging.orderNo" clearable></el-input>
            <el-select v-model="paging.status" placeholder="请选择订单状态" style="margin-right: 10px;">
                    <el-option
                    v-for="item in logistics"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="order()">搜索</el-button>
              <div class="blocks">
                <el-date-picker
                type="daterange"
                range-separator="至"
                v-model="paging.time"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
                 <el-select v-model="paging.statusDate" placeholder="待出库" style="margin:0px 10px;">
                    <el-option
                    v-for="item in logistics"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
              </el-select>
              <el-button type="primary" icon="el-icon-download" @click="derive()">导出</el-button>   
              <el-button type="primary" icon="el-icon-download" @click="derive">汇总</el-button> 
              </div>
        </div>
        <!--内容 -->
        <el-card class="box-card">
             <el-table :data="listData" style="width: 100%" border :cell-class-name="tableRowClassName" highlight-current-row>
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                              <el-form-item label="商品名称">
                                  <span>{{ props.row.consignee}}</span>
                              </el-form-item>
                              <el-form-item label="所属店铺">
                                  <span>{{ props.row.phone }}</span>
                              </el-form-item>
                              <el-form-item label="商品 ID">
                                  <span>{{ props.row.adminMono }}</span>
                              </el-form-item>
                            </el-form>
                        </template>
                        </el-table-column>
                        <el-table-column label="订单编号" prop="orderNo" width='200px'>
                           <template slot-scope="scope">
                              <span :class="scope.row">{{ scope.row.orderNo }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="用户ID" property="userId"></el-table-column>
                        <el-table-column label="订单状态" prop="status">
                          <template slot-scope="scops">
                             <el-tag>{{scops.row.status|statusDate()}}</el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column label="支付渠道" prop="payChannel">
                          <template slot-scope="scops">
                             <el-tag>{{scops.row.payChannel|payChannelDate()}}</el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column label="订单金额" prop="actualPrice">
                          <template slot-scope="scope">¥{{scope.row.actualPrice/100}}</template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="gmtCreate" width='200px'>
                           <template slot-scope="scops">
                              {{scops.row.gmtCreate|formatDate()}}
                           </template>
                        </el-table-column>
                        <el-table-column label="物流渠道" prop="shipCode">
                           <template slot-scope="scops">
                              <el-tag>{{scops.row.shipCode|shipCodeDate()}}</el-tag>
                           </template>
                        </el-table-column>
                        <el-table-column label="物流单号" prop="shipNo"></el-table-column>
                        <el-table-column label="备注" prop="" width='200px;'></el-table-column>
                        <el-table-column label="物流单号" prop="" width='200px;'></el-table-column>
                        <el-table-column label="操作"  width='300px;'>
                            <template slot-scope="scope">
                                <el-button size="mini"  @click="particulars(scope.row)" class="blue">详情</el-button>
                                <el-button size="mini"  @click="distribution(scope.row)" class="blue" v-if="scope.row.status==20">配送单</el-button>
                                <el-button size="mini"  @click="shipments(scope.row)" class="blue" v-if="scope.row.status==20">发货</el-button>
                                <el-button size="mini"  @click="sales(scope.row)" class="blue" v-if="scope.row.status==60">退货</el-button>
                            </template>
                        </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页 -->
        <div class="block">
        <!-- current-change当前页size-change每页条数current-page当前页数，支持 .sync 修饰符page-sizes每页显示条目个数，支持 .sync 修饰符-->
        <Paging @handle="handles" :allPages="paging"></Paging>
      </div>
        <!-- 添加编辑 -->
        <div class="pop-up">
          <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" ref="ruleForm">
            <el-form-item label="订单编号" prop='title' align="center" :label-width="formLabelWidth">
                {{ruleForm.orderNo}}
            </el-form-item>
            <el-form-item label="用户id" prop='title' :label-width="formLabelWidth">
                 {{ruleForm.id}}
            </el-form-item>
            <el-form-item label="订单渠道" prop='title' :label-width="formLabelWidth">
                  {{ruleForm.channel}}
            </el-form-item>
            <el-form-item label="订单状态" prop='title' :label-width="formLabelWidth">
            <template >
                 <el-tag>{{ruleForm.status|statusDate()}}</el-tag>
            </template>
            </el-form-item>
            <el-form-item label="支付渠道" prop='title' :label-width="formLabelWidth">
             <template>
                 <el-tag>{{ruleForm.payChannel|payChannelDate()}}</el-tag>
             </template>
            </el-form-item>
            <el-form-item label="用户留言" prop='title' :label-width="formLabelWidth">
             {{ruleForm.adminMono}}
            </el-form-item>
            <el-form-item label="客服备注" prop='title' :label-width="formLabelWidth">
             {{ruleForm.channel}}
             <button type="button" class="el-button el-button--primary" @click="compile()"><i class="el-icon-edit"></i><span>编辑</span></button>
            </el-form-item>
            <el-form-item label="配送费用" prop='title' :label-width="formLabelWidth">
             {{ruleForm.channel}}
            </el-form-item>
            <el-form-item label="收货信息" prop='title' :label-width="formLabelWidth">
             (收货人){{ruleForm.consignee}}(手机号){{ruleForm.phone}}(地址){{ruleForm.province}}{{ruleForm.city}}{{ruleForm.county}}{{ruleForm.address}}
            </el-form-item>
            <el-form-item label="收货信息" :label-width="formLabelWidth">
              <el-table :data="skuList" border width="500px" style="width:1000px;">
                  <el-table-column prop="spuTitle" label="名称"></el-table-column>
                  <el-table-column prop="title" label="规格"></el-table-column>
                  <el-table-column prop="num" label="商品数量"></el-table-column>
                  <el-table-column prop="unit" label="单位"></el-table-column>
                  <el-table-column prop="price" label="总数(单价*数量)">
                     <template slot-scope="scope">{{scope.row.price/100}}</template>
                  </el-table-column>
                </el-table>
            </el-form-item>
            </el-form>
        </el-dialog>
        </div>
          <!-- 添加编辑 -->
        <el-dialog title="发货" :visible.sync="dialogFormVisiblelist">
            <el-form :model="ruleForm" ref="ruleForm">
            <div v-if="!deliverStatus">
              <el-form-item label="等级" prop='title' :label-width="formLabelWidth">
                <el-radio-group v-model="ruleForm.adminMonoLevel">
                  <el-radio :label="0">无色</el-radio>
                  <el-radio :label="1">绿色</el-radio>
                  <el-radio :label="2">橙色</el-radio>
                  <el-radio :label="3">红色</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="内容" prop='title' :label-width="formLabelWidth">
                  <el-input placeholder="请输入内容" v-model="ruleForm.adminMono">
                  </el-input>
              </el-form-item>
            </div>
            <div v-if="deliverStatus">
              <el-form-item label="快递公司" prop='title' :label-width="formLabelWidth">
                  <el-select  v-model="ruleForm.shipCode" filterable placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="快递编号" prop='title' :label-width="formLabelWidth">
                  <el-input placeholder="请输入内容" v-model="ruleForm.shipNo">
                  </el-input>
              </el-form-item>
            </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisiblelist = false">取 消</el-button>
                <el-button type="primary" @click="confirmlist(ruleForm)">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 退货 -->
        <div>
        <el-dialog title="退货" :visible.sync="FormVisibleReturn" width="900px">
          <div class="loginRight">
            <div class="login-right">
              <el-form
                status-icon
                label-width="150px"
                class="demo-ruleForm"               
              > 
              <el-form-item label="tips">
                <span>
                  允许退款后钱会退回对方账户，请确认您已经收到退货
              </span>
              </el-form-item>
              <el-form-item label="操作">
                <el-radio-group v-model="ruleForm.radios">
                  <el-radio :label="0">拒绝退款</el-radio>
                  <el-radio :label="1">允许退款</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="金额" prop='title' :label-width="formLabelWidth"  v-if="radios==1">
                <el-input placeholder="请输入内容" v-model="ruleForm.adminMono">
                  </el-input>
              </el-form-item>
              </el-form>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="FormVisibleReturn= false">取 消</el-button>
            <el-button type="primary" @click="confirms()">
              <div>确 定</div>
            </el-button>
          </div>
        </el-dialog>
      </div>
     </div>
  </div>
</template>
<script>
import freightmanage from'../../api/operate/freightmanage'
import Paging from "../../components/Paging"; //分页
export default {
components: {
    Paging
  },
  data() {
    return {
      radios:'',
      client:"",
      // 禁止按钮状态
      deliverStatus :false,
      conceal:false,
      conceallist:false,
      FormVisibleReturn:false,
     
      options: [{
          value: 'NONE',
          label: '无需物流公司'
        }, {
          value: 'SF',
          label: '顺丰速运'
        }, {
          value: 'HTKY',
          label: '百世快递'
        }, {
          value: 'ZTO',
          label: '中通快递'
        }, {
          value: 'STO',
          label: '申通快递'
        },{
          value: 'YTO',
          label: '圆通速递'
        }, {
          value: 'YD',
          label: '韵达速递'
        }, {
          value: 'ZPY',
          label: '邮政快递包裹'
        }, {
          value: 'EMS',
          label: 'EMS'
        },{
          value: 'HHTT',
          label: '天天快递'
        }, {
          value: 'JD',
          label: '京东快递'
        }, {
          value: 'UC',
          label: '优速快递'
        },{
          value: 'DBL',
          label: '德邦快递'
        }, {
          value: 'ZJS',
          label: '宅急送'
        },{
          value: 'TNT',
          label: 'TNT快递'
        }],
     logistics: [{
          value: '10',
          label: '未付款'
        }, {
          value: '12',
          label: '正在拼团'
        }, {
          value: '20',
          label: '待出库'
        }, {
          value: '30',
          label: '待收货'
        }, {
          value: '40',
          label: '待评价'
        },{
          value: '50',
          label: '已完成'
        }, {
          value: '60',
          label: '退款中'
        }, {
          value: '70',
          label: '已退款'
        }, {
          value: '80',
          label: '已取消'
        }, {
          value: '90',
          label: '已取消(系统)'
        }],
     dialogFormVisiblelist:false,
      skuList:[],
     // 分页
      paging:{
        time:'',
        statusDate:'',
        orderNo: '',
        status: '',
        currentPage: 1,//当前的默认的页数
        eachpage: 10,//默认的页码
        total: 0,//初始值共数据条
        totalPageNo: 1,
      },
      listData:[],//初始化数据
      dialogFormVisible:false,
      FormVisible: false, //弹窗口
      select:[],//选中的权限'
      rules:[],
      authoriId:'',
       // 分页
      paging:{
        adType: '',
        status:"",
        currentPage: 1,//当前的默认的页数
        eachpage: 10,//默认的页码
        total: 0,//初始值共数据条
        totalPageNo: 1,
      },
      // 弹框
      titleMap: {
        addEquipment:'新增',            
        editEquipment: "编辑"            
     },
     //  输入框宽度
     formLabelWidth: '120px',
    //  输入框所有值
     ruleForm:{
        radios:"",
        orderNo:"",
        adminMonoLevel:'',
        shipNo:'',
        shipCode:'',
     },//输入框验证
     dialogStatus:"",
     compileId:'',//商品id
    }
  },
  //  过滤器
  filters: {
     //   时间戳转换时间格式
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return  MM + '月' + d + '日' + h + '时' + m +'分'
      },
     payChannelDate:function(value){
        switch (value) {
         case 'WX':value='微信支付'
           break;
         case 'OFFLINE':value='线下支付'
           break;
       }
       return !value?'未支付':value
    },
    shipCodeDate:function(value){
        switch (value) {
         case 'NONE':value='无需物流公司'
           break;
         case 'SF':value='顺丰速运'
           break;
        case 'HTKY':value='百世快递'
           break;
        case 'ZTO':value='中通快递'
           break;
        case 'STO':value='申通快递'
           break;
        case 'YTO':value='圆通速递'
           break;
        case 'YD':value='韵达速递'
           break;
         case 'YZPY':value='邮政快递包裹'
           break;
        case 'EMS':value='EMS'
           break;
        case 'HHTT':value='天天快递'
           break;
        case 'JD':value='京东快递'
           break;
         case 'UC':value='优速快递'
           break;
        case 'DBL':value='德邦快递'
           break;
        case 'ZJS':value='宅急送'
           break;
        case 'TNT':value='TNT快递'
           break;
       }
       return !value?'未支付':value
    },
     statusDate:function(value){
       switch (value) {
         case 10:value='未付款'
           break;
         case 12:value='正在拼团'
           break;
        case 20:value='待出库'
           break;
        case 30:value='待收货'
           break;
        case 40:value='待评价'
           break;
        case 50:value='已完成'
           break;
        case 60:value='退款中'
           break;
         case 70:value='已退款'
           break;
        case 80:value='已取消'
           break;
        case 90:value='已取消(系统)'
           break;
       }
       return value
     }
  },
  created() {
    this.order()
    // this.spUcategory()
  },
  methods: {
    // 表格状态背景颜色
     tableRowClassName({row, rowIndex,columnIndex}) {
       console.log(row.adminMonoLevel)
            if(columnIndex==1){
               switch (row.adminMonoLevel){
            case 0:
              return ' '; break;
            case 1:
              return 'green-row'; break;  
            case 2:
              return 'orange-row'; break;
            case 3:
              return 'red-row'; break;
          }
            }
      },
    export2Excel(listData){
      const tHeader = ['订单编号', '商品名称', '规格', '单位', '配送数量','配送地址', '收货人', '联系方式', '区域划分', '客服备注', '用户备注'];
      const filterVal = ['orderNo','spuTitle','title','unit','num','province','consignee','phone','city','channel'];
      let arr=[];
      listData.map(a=>{ //循环过滤
        a.skuList.forEach(item=>{
          let obj={};
          obj['orderNo']=item.orderNo;
          obj['spuTitle']=item.spuTitle;
          obj['title']=item.title;
          obj['unit']=item.unit;
          obj['num']=item.num;
          obj['address']=a.province+a.city+a.county+a.address;
          obj['realname']=a.realname;
          obj['phone']=a.phone;
          obj['adminMono']=a.adminMono;
          obj['mono']=a.mono;
          arr.push(obj)
        })
      })
      console.log(arr)
      const data=arr.map(v => filterVal.map(j => v[j]))
      import('../../vendor/Export2Excel').then(excel => {
      excel.export_json_to_excel({
        header: tHeader, //表头 必填
        data, //具体数据 必填
        filterVal,//表头对应的字段，必填
        filename: '订单信息', //非必填
        autoWidth: true, //非必填
        bookType: 'xlsx' //非必填
      })
})
    },
    // 导出按钮
    derive(){
             freightmanage.derive().then(res=>{
            this.export2Excel(res.data.data)
        })
    },
   // 分页负值
    handles(val) {
      this.allPages = val;
      this.order()
    },
    // 退货按钮
    sales(row){
      this.ruleForm={...row}
      this.FormVisibleReturn=true
    },
    //数据详情
      order(){
        let _this=this
        freightmanage.order(_this.paging).then(res=>{
            _this.listData=res.data.data.items
            console.log(_this.listData)
            // 分页数据
            _this.paging.currentPage=res.data.data.pageNo
            _this.paging.eachpage=res.data.data.pageSize
            _this.paging.total=res.data.data.total
            _this.paging.totalPageNo=res.data.data.totalPageNo
        })
      },
  // 退货
  confirms(){
    console.log(this.ruleForm)
          freightmanage.saless(this.ruleForm).then(res=>{
           if (res.data.errmsg=='成功') {
             this.$message.success('拒绝退款成功')
           } else {
             this.$message.error('订单状态不支持退款')
             
           }
          })
  },
    // 详情
      particulars(row) {
        console.log(row)
         this.dialogFormVisible = true;
         this.dialogStatus = 'editEquipment';
         this.ruleForm={...row}
         this.conceal=true;
         freightmanage.details(row).then(res=>{
            this.skuList=res.data.data.skuList
         })
        },
        // 配送
        distribution(row){
          console.log(row)
            freightmanage.detail(row).then(res=>{
              let listData=[]
              listData.push(res.data.data)
              this.export2Excel(listData)
            })
        },
        // 编辑
      compile(){
        this.dialogFormVisiblelist = true;
      },
      // 确认发货
      confirmlist(ruleForm){
        freightmanage.editAdminMono(ruleForm).then(res=>{
          this.order()
        })
        this.dialogFormVisiblelist = false
        freightmanage.deliver(ruleForm,this.ruleForm.orderNo).then(res=>{
          if (res.data.errmsg=='成功') {
              this.$message.success('确认发货成功！');
              this.order()
          }
        })
      },
      // 发货
      shipments(row){
        console.log(row)
        row.shipCode=this.options[0].value
        this.ruleForm={...row}
        this.dialogFormVisiblelist = true;
        this.deliverStatus=true
      }
    },
watch:{
    // 去除错误提示
    dialogFormVisible(val){
     if (val == false) {
         this.$refs.ruleForm.clearValidate();
     }
    }
  }
}
</script>
<style scoped>
 >>>.green-row {
    background: #A6CA95;
  }
 >>>.orange-row {
    background: #C5AF8E;
  }
 >>>.red-row {
    background: #C98F8F;
  }
.role{ 
    line-height: 0px;
    overflow: hidden;
}
/* 添加编辑 */
.el-input{        
    width: 300px;
}
.validtimes{
  color:#ffffff;
  background:#409EFF !important;
}
.validtime_nane{
margin-left: 40%;
padding-top: 10px;
}
.validtime{
  width: 150px;
  height: 40px;
  background:#ffffff;
}
.el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: auto;
}
.el-table{
  width:100%;
}
.el-table::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 5px;
}
.el-form/deep/.el-input__inner{
    width: 300px;
}
.el-form-item__content/deep/.el-select{
 padding-left: 0px !important;
}
>>>.el-form-item__content{
    width: 200px;
    margin-left: 0px !important;
} 
>>>.el-dialog/deep/.el-dialog__header{
    width: 50px;
}
.el-form-item/deep/.el-form-item__error{
    text-indent:8rem
}
/* 分页 */
.block{
    width: 40%;
    padding-top: 20px;
}
/* 字体居中 */
.blue{
    background: #409EFF;
    color: #ffffff;
}
.el-table--enable-row-transition/deep/.el-table__body td {
   text-align: center;
}
.el-table/deep/th.is-sortable {
    cursor: pointer;
    text-align: center;
}
.el-table td, .el-table/deep/th.is-leaf {
    text-align: center;
}
.pop-up .el-table {
max-width:680px;
position: relative;
left: 50px;
}
/* 布局 */
.el-card/deep/.box-card{
  height: 50%;
   overflow: hidden;
}
.role-content{
    width: 96%;
    margin: auto;
    overflow: hidden;
}
.el-input{
    width: 200px;
    margin-right: 10px;
}
.role-top{
    width: 520px;
   line-height: 60px;
}
.box-card{
   overflow: hidden;
}
/* 表格 */
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
>>>.el-form{
  width: 118px;
  display: grid;
}
</style>
